<template>
    <div class="browser-option">
        <div class="left">
            <a-dropdown>
                <a-button type="primary" size="small" style="margin: 2px;">创建</a-button>
                <template #content>
                    <a-doption @click="mkdir">
                        <template #icon>
                            <icon-folder />
                        </template>
                        文件夹
                    </a-doption>
                    <a-doption @click="touch">
                        <template #icon>
                            <icon-file />
                        </template>
                        文件
                    </a-doption>
                </template>
            </a-dropdown>
            <a-button-group type="dashed" style="margin-left: 14px;" size="small">
                <a-upload :custom-request="customRequest" :show-file-list="false" multiple>
                    <template #upload-button>
                        <a-button>上传文件</a-button>
                    </template>
                </a-upload>
                <a-upload :custom-request="customRequestFolder" :show-file-list="false" directory>
                    <template #upload-button>
                        <a-button>上传文件夹</a-button>
                    </template>
                </a-upload>
                <a-button :disabled="!copy" @click="execCopy">复制</a-button>
                <a-button :disabled="!move" @click="execMove">剪切</a-button>
                <a-button :disabled="!paste" @click="execPaste">黏贴</a-button>
                <a-button :disabled="!remove" @click="execRemove" status="danger">删除</a-button>
            </a-button-group>
        </div>
        <a-button-group type="text">
            <a-dropdown>
                <a-button>
                    <template #icon><icon-layout /></template>
                    布局
                </a-button>
                <template #content>
                    <a-doption :style="{ color: layout === SettingLayoutEnum.INFO ? 'red' : 'var(--color-text-1)' }"
                        @click="setLayout(SettingLayoutEnum.INFO)">详细布局</a-doption>
                    <a-doption :style="{ color: layout === SettingLayoutEnum.TABLE ? 'red' : 'var(--color-text-1)' }"
                        @click="setLayout(SettingLayoutEnum.TABLE)">表格布局</a-doption>
                </template>
            </a-dropdown>
            <a-dropdown>
                <a-button>
                    <template #icon><icon-sort /></template>
                    排序
                </a-button>
                <template #content>
                    <a-doption :style="{ color: order === SettingOrderEnum.DEFAULT ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.DEFAULT)">
                        默认排序
                    </a-doption>
                    <a-doption :style="{ color: order === SettingOrderEnum.NAME_ASC ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.NAME_ASC)">
                        名称正序
                    </a-doption>
                    <a-doption :style="{ color: order === SettingOrderEnum.NAME_DESC ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.NAME_DESC)">
                        名称倒序
                    </a-doption>
                    <a-doption
                        :style="{ color: order === SettingOrderEnum.UPDATE_TIME_ASC ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.UPDATE_TIME_ASC)">
                        更新时间正序
                    </a-doption>
                    <a-doption
                        :style="{ color: order === SettingOrderEnum.UPDATE_TIME_DESC ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.UPDATE_TIME_DESC)">
                        更新时间倒序
                    </a-doption>
                    <a-doption :style="{ color: order === SettingOrderEnum.TYPE ? 'red' : 'var(--color-text-1)' }"
                        @click="setOrder(SettingOrderEnum.TYPE)">
                        类型
                    </a-doption>
                </template>
            </a-dropdown>
        </a-button-group>
    </div>
</template>
<script lang="ts">
import { useTaskStore } from "@/module/task/store/TaskStore";
import { useBrowserStore } from "../store/BrowserStore";
import { useLoadingStore } from "@/store/LoadingStore";
import { useLocalSettingStore } from "@/module/setting/store/LocalSettingStore";
import MessageBoxUtil from "@/utils/MessageBoxUtil";
import MessageUtil from "@/utils/MessageUtil";
import { RequestOption } from "@arco-design/web-vue";
import { mapState } from "pinia";
import { defineComponent } from "vue";
import SettingLayoutEnum from "@/module/setting/enumeration/SettingLayoutEnum";
import SettingOrderEnum from "@/module/setting/enumeration/SettingOrderEnum";
import { useOptionStore } from "../store/OptionStore";

export default defineComponent({
    name: 'browser-option',
    data: () => ({
        SettingLayoutEnum,
        SettingOrderEnum
    }),
    emits: ['saveFile', 'touch'],
    computed: {
        ...mapState(useBrowserStore, ['path']),
        ...mapState(useLocalSettingStore, ['order', 'layout']),
        ...mapState(useOptionStore, ['copy', 'remove', 'move', 'paste'])
    },
    methods: {
        mkdir() {
            MessageBoxUtil.prompt("请输入文件夹名", "新建文件夹", {
                confirmButtonText: "新建"
            }).then(value => {
                if (value.trim() === '') {
                    MessageUtil.warning("请输入正确的文件夹名");
                    return;
                }
                if (/[\/:*?\"<>|]/.test(value)) {
                    MessageUtil.warning("文件夹名不能包含【\\\\/:*?\"<>|】这些非法字符");
                    return;
                }
                useLoadingStore().start("创建文件夹")
                useBrowserStore().driver.mkdir(value, useBrowserStore().path).then(() => {
                    MessageUtil.success("文件夹创建成功");
                    useBrowserStore().render();
                }).catch(e => {
                    MessageUtil.error("文件夹创建失败", e);
                });
            });
        },
        touch() {
            MessageBoxUtil.prompt("请输入文件名", "新建文件", {
                confirmButtonText: "新建"
            }).then(value => {
                if (value.trim() === '') {
                    MessageUtil.warning("请输入正确的文件名");
                    return;
                }
                if (/[\/:*?\"<>|]/.test(value)) {
                    MessageUtil.warning("文件名不能包含【\\\\/:*?\"<>|】这些非法字符");
                    return;
                }
                this.$emit('touch', value);
            });
        },
        customRequest(option: RequestOption): any {
            let file = option.fileItem.file as File;
            useTaskStore().download({
                name: `上传文件【${file.name}】`,
                run: (progress, success, fail) => {
                    useLoadingStore().start(`上传文件【${file.name}】`);
                    useBrowserStore().driver.write<File>(useBrowserStore().resolve(file.name), file,
                        (current, total) => {
                            progress(current, total);
                        }).then(() => {
                            MessageUtil.success('上传成功');
                            success();
                            useBrowserStore().render();
                        }).catch(e => {
                            MessageUtil.error("上传失败", e);
                            fail(e);
                        }).finally(() => {
                            useLoadingStore().close();
                        });
                }
            });
        },
        // 自定义上传文件夹
        customRequestFolder(option: RequestOption): any {
            let file = option.fileItem.file as File;
            useTaskStore().download({
                name: `上传文件【${file.name}】`,
                run: (progress, success, fail) => {
                    useLoadingStore().start(`上传文件【${file.name}】`);
                    useBrowserStore().driver.write<File>(useBrowserStore().resolve(file.webkitRelativePath), file,
                        (current, total) => {
                            progress(current, total);
                        }).then(() => {
                            MessageUtil.success('上传成功');
                            success();
                            useBrowserStore().render();
                        }).catch(e => {
                            MessageUtil.error("上传失败", e);
                            fail(e);
                        }).finally(() => {
                            useLoadingStore().close();
                        });
                }
            });
        },
        setLayout(layout: SettingLayoutEnum) {
            useLocalSettingStore().setLayout(layout);
            useBrowserStore().render();
        },
        setOrder(order: SettingOrderEnum) {
            useLocalSettingStore().setOrder(order);
            useBrowserStore().render();
        },
        execCopy() {
            useOptionStore().execCopy();
        },
        execMove() {
            useOptionStore().execMove();
        },
        execPaste() {
            useOptionStore().execPaste();
        },
        execRemove() {
            useOptionStore().execRemove();
        }
    }
});
</script>
<style lang="less">
.browser-option {
    position: absolute;
    top: 46px;
    left: 7px;
    right: 7px;
    height: 32px;
    display: flex;
    justify-content: space-between;

    .left {
        display: flex;
    }

}
</style>